<template>
    <div>
        <el-form :inline="true" :model="query" label-width="80px" label-suffix=":" >
            <el-form-item label="角色名称">
                <el-input v-model="query.name" placeholder="请输入角色名称" clearable maxlength="30"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button icon="ele-Search" type="primary" @click="handleQuery()">查询</el-button>
                <el-button icon="ele-Plus" type="success" @click="handleAdd()">新增角色</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" ref="tableListRef" :data="tableList" :height="tableHeight" stripe border>
            <el-table-column align="center" type="index" lable="序号" width="60"></el-table-column>
            <el-table-column align="center" prop="roleName" label="角色名称"></el-table-column>
            <el-table-column align="center" prop="roleCode" label="角色编码"></el-table-column>
            <el-table-column align="center" prop="status" label="角色状态">
                <template #default="{ row }">
                    <el-tag :type="row.status ? 'success' : 'warning'">{{ row.status ? '启用' : '停用' }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="remark" label="备注"></el-table-column>
            <el-table-column align="center" fixed="right" label="操作" width="260">
                <template #default="{ row }">
                    <el-button link type="primary" icon="ele-Check" @click="handlePermission(row)">分配权限</el-button>
                    <el-button link type="warning" icon="ele-Edit" @click="handleEdit(row)">修改</el-button>
                    <el-popconfirm width="auto" :title="`确定删除角色【${row.roleName}】吗？`" @confirm="handleDelete(row.id)">
                        <template #reference>
                            <el-button link type="danger" icon="ele-Delete">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <m-page :page="page" @pageChange="queryData"></m-page>
        <!-- 新增、修改组件 -->
        <RoleEdit ref="editRef" @queryData="queryData"></RoleEdit>
        <!-- 分配权限组件 -->
        <Permission ref="permissionRef"></Permission>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted, onUnmounted, nextTick, defineAsyncComponent } from 'vue'
import { getPageList, deleteById } from '@/api/system/role'
import { notify } from '@/utils/element'

const RoleEdit = defineAsyncComponent(() => import('@/views/system/role/RoleEdit.vue'))
const Permission = defineAsyncComponent(() => import('@/views/system/role/components/Permission.vue'))

// 列表ref
const tableListRef = ref()
// 编辑弹窗ref
const editRef = ref()
// 分配权限ref
const permissionRef = ref()

// 声明状态
const state = reactive({
    loading: false,
    page: {
        current: 1,
        size: 20,
        total: 0
    } as PageType,
    query: {
        name: ''
    } as SysRoleQuery,
    tableList: [] as SysRoleType[],
    tableHeight: 0
})

// 转为 ref 后解构
const { loading, page, query, tableList, tableHeight } = { ...toRefs(state) }

const screenHeight = ref(window.innerHeight)

onMounted(() => {
    // 监听窗口变化，动态计算表格高度
    window.addEventListener('resize', handleResize)
    // 页面首次加载，先调用一次
    handleResize()
    // 查询列表数据
    queryData()
})

onUnmounted(() => {
    window.removeEventListener('resize', handleResize)
})

// 监听窗口变化，动态计算表格高度
function handleResize() {
    screenHeight.value = window.innerHeight
    state.tableHeight = screenHeight.value - 210
}

// 查询列表数据
async function queryData() {
    try {
        state.loading = true
        const { current, size } = state.page
        const { data } = await getPageList(state.query, current, size)
        state.tableList = []
        nextTick(() => {
            state.tableList = data.records
            state.page.total = data.total
        })
    } catch (error) {
    } finally {
        state.loading = false
    }
}

// 根据条件查询
function handleQuery() {
    state.page.current = 1
    queryData()
}

// 新增
function handleAdd() {
    editRef.value.open('add', '新增')
}

// 修改
function handleEdit(row: SysRoleType) {
    editRef.value.open('edit', '修改', row)
}

// 删除
async function handleDelete(id: string) {
    try {
        state.loading = true
        await deleteById(id);
        notify('删除成功', { type: 'success' })
        queryData()
    } catch (error) {

    } finally {
        state.loading = false
    }
}

// 分配权限
function handlePermission(row: SysMenuType) {
    permissionRef.value.open(row)
}

</script>

<style scoped></style>